<template>
  <view class="container">
    <!-- 球队头部信息 -->
    <view class="team-header">
      <view class="header-bg">
        <!-- 背景纹理 -->
        <view class="bg-pattern"></view>
      </view>
      <view class="header-content">
        <!-- 顶部操作栏 -->
        <view class="top-bar">
          <view class="back-btn" @click="goBack">
            <text class="back-icon">‹</text>
          </view>
        </view>
        
        <!-- 球队信息主体 -->
        <view class="team-info">
          <!-- 球队logo -->
          <view class="team-logo-container">
            <image class="team-logo" :src="teamData.logo" mode="aspectFit"></image>
          </view>
          
          <!-- 球队名称和信息 -->
          <view class="team-details">
            <text class="team-name-cn">{{ teamData.name }}</text>
            <text class="team-venue">{{ teamData.description }}</text>
          </view>
          
          <!-- 关注按钮 -->
          <view class="follow-btn-container">
            <view class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
              <text class="follow-icon">{{ isFollowed ? '✓' : '+' }}</text>
              <text class="follow-text">{{ isFollowed ? '已关注' : '关注' }}</text>
            </view>
          </view>
        </view>
        
        <!-- 球队统计数据 -->
        <view class="team-stats" v-if="teamStats.totalGames > 0">
          <view class="stats-row">
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.totalGames }}</text>
              <text class="stat-label">总场次</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.wins }}</text>
              <text class="stat-label">胜场</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.losses }}</text>
              <text class="stat-label">负场</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.winRate }}</text>
              <text class="stat-label">胜率</text>
            </view>
          </view>
          <view class="stats-row">
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.averageScore.toFixed(1) }}</text>
              <text class="stat-label">场均得分</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ teamStats.totalPoints }}</text>
              <text class="stat-label">总得分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <scroll-view class="tab-scroll" scroll-x="true" :scroll-left="scrollLeft">
        <view class="tab-list">
          <view 
            class="tab-item" 
            :class="{ active: activeTab === index }"
            v-for="(tab, index) in tabList" 
            :key="index"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 阵容页面 -->
      <view v-if="activeTab === 0" class="roster-content">
        <view class="roster-header">
          <view class="roster-stats">
            <text class="roster-title">阵容</text>
            <text class="roster-count">共{{ playerList.length }}人</text>
          </view>
        </view>
        
        <!-- 球员列表 -->
        <view class="player-list">
          <view class="list-header">
            <text class="col-avatar"></text>
            <text class="col-name">姓名</text>
            <text class="col-number">号码</text>
            <text class="col-position">位置</text>
            <text class="col-age">年龄</text>
            <text class="col-height">身高</text>
          </view>
          
          <view 
            class="player-item" 
            v-for="(player, index) in playerList" 
            :key="index"
            @click="viewPlayerDetail(player)"
          >
            <view class="col-avatar">
              <image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
            </view>
            <text class="col-name">{{ player.name }}</text>
            <text class="col-number">{{ player.number }}</text>
            <text class="col-position">{{ player.position }}</text>
            <text class="col-age">{{ player.age }}</text>
            <text class="col-height">{{ player.height }}</text>
          </view>
        </view>
      </view>

      <!-- 赛程页面 -->
      <view v-else-if="activeTab === 1" class="schedule-content">
        <!-- 最近比赛 -->
        <view v-if="recentMatches.length > 0" class="match-section">
          <view class="section-header">
            <text class="section-title">最近比赛</text>
          </view>
          
          <view class="match-list">
                         <view 
               class="match-item" 
               v-for="(match, index) in recentMatches" 
               :key="`recent-${index}`"
             >
              <view class="match-header">
                <text class="match-time">{{ match.matchTime }}</text>
                <text class="match-venue">{{ match.venue }}</text>
              </view>
              
              <view class="match-teams">
                <view class="team home-team">
                  <text class="team-name">{{ teamData.name }}</text>
                </view>
                
                <view class="match-score">
                  <text class="score">{{ match.score.team }} : {{ match.score.opponent }}</text>
                  <text class="match-result" :class="{
                    'result-win': match.result === '胜' || match.result === '胜利',
                    'result-lose': match.result === '负' || match.result === '失败',
                    'result-draw': match.result === '平' || match.result === '平局'
                  }">{{ match.result }}</text>
                </view>
                
                <view class="team away-team">
                  <text class="team-name">{{ match.opponent.name }}</text>
                </view>
              </view>
              
              <view class="match-actions">
                <text class="match-status">{{ match.status }}</text>
                <!-- 只有当状态不是"已结束"时才显示回放按钮 -->
                <view 
                  v-if="match.status !== '已结束'" 
                  class="action-btn replay-btn" 
                  @click="watchReplay(match)"
                >
                  <text class="btn-text">回放</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 即将进行的比赛 -->
        <view v-if="upcomingMatches.length > 0" class="match-section">
          <view class="section-header">
            <text class="section-title">即将进行</text>
          </view>
          
          <view class="match-list">
                         <view 
               class="match-item" 
               v-for="(match, index) in upcomingMatches" 
               :key="`upcoming-${index}`"
             >
              <view class="match-header">
                <text class="match-time">{{ match.matchTime }}</text>
                <text class="match-venue">{{ match.venue }}</text>
              </view>
              
              <view class="match-teams">
                <view class="team home-team">
                  <text class="team-name">{{ teamData.name }}</text>
                </view>
                
                <view class="match-vs">
                  <text class="vs-text">VS</text>
                </view>
                
                <view class="team away-team">
                  <text class="team-name">{{ match.opponent.name }}</text>
                </view>
              </view>
              
              <view class="match-actions">
                <text class="match-status upcoming">{{ match.status }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 暂无比赛数据 -->
        <view v-if="recentMatches.length === 0 && upcomingMatches.length === 0" class="empty-matches">
          <text class="empty-text">暂无比赛数据</text>
        </view>
      </view>

      <!-- 其他标签页内容占位 -->
      <view v-else class="placeholder-content">
        <view class="placeholder-text">{{ tabList[activeTab].name }}内容开发中...</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTeamDetail } from '@/api/cunba.js'
import request from '@/utils/request.js'

export default {
  data() {
    return {
      activeTab: 0, // 默认显示阵容页面
      scrollLeft: 0,
      isFollowed: false, // 关注状态
      teamData: {
        name: '雷霆',
        nameEn: 'Thunder',
        logo: '/static/images/team.png',
        description: '美国俄克拉荷马州俄克拉荷马市/Paycom中心球馆'
      },
      // 球队统计数据
      teamStats: {
        totalGames: 0,
        wins: 0,
        losses: 0,
        winRate: '0%',
        totalPoints: 0,
        averageScore: 0
      },
      // 最近比赛
      recentMatches: [],
      // 即将到来的比赛
      upcomingMatches: [],
      tabList: [
        { name: '阵容', id: 'roster' },
        { name: '赛程', id: 'schedule' }
      ],
      playerList: [
        {
          name: '亚历山大',
          number: '2',
          position: '后卫',
          age: '27',
          avatar: '/static/images/mine.png'
        },
        {
          name: '霍姆格伦',
          number: '7',
          position: '中锋/前锋',
          age: '23',
          avatar: '/static/images/mine.png'
        },
        {
          name: '卡尔森',
          number: '15',
          position: '中锋',
          age: '26',
          avatar: '/static/images/mine.png'
        },
        {
          name: '亚当·弗拉格勒',
          number: '14',
          position: '后卫',
          age: '25',
          avatar: '/static/images/mine.png'
        },
        {
          name: '迪昂',
          number: '13',
          position: '前锋',
          age: '22',
          avatar: '/static/images/mine.png'
        },
        {
          name: '米切尔',
          number: '25',
          position: '后卫',
          age: '23',
          avatar: '/static/images/mine.png'
        },
        {
          name: '华莱士',
          number: '22',
          position: '后卫',
          age: '21',
          avatar: '/static/images/mine.png'
        },
        {
          name: '杰林·威廉姆斯',
          number: '6',
          position: '前锋',
          age: '23',
          avatar: '/static/images/mine.png'
        }
      ],
      // 最近比赛数据
      recentMatches: [
        {
          matchTime: '2024-01-15 19:30',
          venue: '主场',
          score: {
            team: 108,
            opponent: 95
          },
          opponent: {
            name: '湖人'
          },
          result: '胜',
          status: '已结束'
        },
        {
          matchTime: '2024-01-12 20:00',
          venue: '客场',
          score: {
            team: 102,
            opponent: 110
          },
          opponent: {
            name: '勇士'
          },
          result: '负',
          status: '已结束'
        }
      ],
      // 即将进行的比赛
      upcomingMatches: [
        {
          matchTime: '2024-01-20 19:30',
          venue: '主场',
          opponent: {
            name: '快船'
          },
          status: '未开始'
        },
        {
          matchTime: '2024-01-25 20:00',
          venue: '客场',
          opponent: {
            name: '太阳'
          },
          status: '未开始'
        }
      ],
      // 最近比赛数据
      recentMatches: [
        {
          id: 1,
          matchTime: "今天 19:50",
          venue: "村BA球馆",
          opponent: {
            id: 3,
            name: "民主客路故乡"
          },
          status: "已结束",
          score: {
            team: 85,
            opponent: 78
          },
          result: "胜利"
        },
        {
          id: 2,
          matchTime: "昨天 15:30",
          venue: "村BA球馆",
          opponent: {
            id: 2,
            name: "华人青年"
          },
          status: "进行中",
          score: {
            team: 92,
            opponent: 88
          },
          result: "胜利"
        }
      ],
      // 即将进行的比赛
      upcomingMatches: [
        {
          id: 3,
          matchTime: "2024-08-21 15:00",
          venue: "村BA球馆",
          opponent: {
            id: 1,
            name: "大道河橄茶姑娘"
          },
          status: "未开始"
        },
        {
          id: 4,
          matchTime: "2024-08-23 17:30",
          venue: "村BA球馆",
          opponent: {
            id: 4,
            name: "BSK"
          },
          status: "未开始"
        }
      ]
    }
  },
  onLoad(options) {
    console.log('=== 球队详情页面加载 ===')
    console.log('接收到的参数:', options)
    console.log('球队ID:', options.teamId)
    console.log('赛事ID:', options.eventId || '未提供')
    console.log('球队名称:', options.teamName ? decodeURIComponent(options.teamName) : '未提供')
    
    if (options.teamId) {
      const eventId = options.eventId || 2 // 默认使用赛事ID 2
      this.loadTeamData(options.teamId, eventId, options.teamName)
    }
    if (options.teamName) {
      this.teamData.name = decodeURIComponent(options.teamName)
    }
    
    // 打印完整的URL参数用于调试
    console.log('=== URL参数调试信息 ===')
    console.log('完整的options对象:', JSON.stringify(options))
    Object.keys(options).forEach(key => {
      console.log(`${key}: ${options[key]}`)
    })
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 切换标签
    switchTab(index) {
      this.activeTab = index
      // 计算滚动位置
      this.scrollLeft = index * 60
    },
    
    // 加载球队数据
    async loadTeamData(teamId, eventId, teamName) {
      console.log('=== 开始加载球队数据 ===')
      console.log('球队ID:', teamId)
      console.log('赛事ID:', eventId)
      console.log('球队名称:', teamName ? decodeURIComponent(teamName) : '未提供')
      console.log('请求时间:', new Date().toLocaleString())
      
      // API请求参数
      const requestParams = {
        teamId: parseInt(teamId),
        eventId: parseInt(eventId)
      }
      
      console.log('=== API请求信息 ===')
      console.log('请求URL: https://cl.xryai.cn/api/cunba/team/detail')
      console.log('请求参数:', requestParams)
      console.log('请求方法: GET')
      
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载球队详情...'
        })
        
        console.log('--- 开始发送API请求 ---')
        console.log('getTeamDetail方法类型:', typeof getTeamDetail)
        console.log('getTeamDetail方法:', getTeamDetail)
        
        // 如果导入的方法有问题，使用本地方法
        let response
        if (typeof getTeamDetail === 'function') {
          response = await getTeamDetail(requestParams)
        } else {
          console.log('使用本地API调用方法')
          response = await this.callTeamDetailAPI(requestParams)
        }
        console.log('--- API请求成功 ---')
        console.log('完整响应:', response)
        
        if (response && response.code === 0 && response.data) {
          console.log('=== API数据解析 ===')
          console.log('球队详情数据:', response.data)
          
          // 更新球队数据
          const teamInfo = response.data.teamInfo || response.data
          this.teamData = {
            name: teamInfo.name || (teamName ? decodeURIComponent(teamName) : '未知球队'),
            nameEn: teamInfo.nameEn || teamInfo.englishName || '',
            logo: teamInfo.logo || teamInfo.avatar || '/static/images/team.png',
            description: `${teamInfo.groupName || 'B组'} / 成立于${teamInfo.establishedYear || '2025'}年`
          }
          
          // 更新球队统计信息
          if (response.data.teamStats) {
            const stats = response.data.teamStats
            this.teamStats = {
              totalGames: stats.totalGames || 0,
              wins: stats.wins || 0,
              losses: stats.losses || 0,
              winRate: stats.winRate || '0%',
              totalPoints: stats.totalPoints || 0,
              averageScore: stats.averageScore || 0
            }
            console.log('球队统计数据:', this.teamStats)
          }
          
          // 更新球员列表
          if (response.data.players && response.data.players.length > 0) {
            this.playerList = response.data.players.map(player => ({
              name: player.name,
              number: player.number.toString(),
              position: player.position,
              age: player.age.toString(),
              height: player.height,
              weight: player.weight,
              avatar: player.avatar || '/static/images/mine.png',
              isCaptain: player.isCaptain,
              isStarter: player.isStarter,
              stats: player.stats
            }))
            console.log('球员列表数据:', this.playerList)
          }
          
          // 更新赛程信息
          if (response.data.recentMatches) {
            this.recentMatches = response.data.recentMatches
            console.log('最近比赛:', this.recentMatches)
          }
          
          if (response.data.upcomingMatches) {
            this.upcomingMatches = response.data.upcomingMatches
            console.log('即将到来的比赛:', this.upcomingMatches)
          }
          
          console.log('=== 更新后的球队数据 ===')
          console.log('球队名称:', this.teamData.name)
          console.log('英文名称:', this.teamData.nameEn)
          console.log('球队Logo:', this.teamData.logo)
          console.log('球队描述:', this.teamData.description)
          
          // 显示成功提示
          uni.showToast({
            title: `加载${this.teamData.name}详情成功`,
            icon: 'success',
            duration: 1500
          })
          
        } else {
          console.log('=== API数据异常 ===')
          console.log('响应码:', response ? response.code : '无响应')
          console.log('错误信息:', response ? response.msg : '网络异常')
          
          // 使用传入的球队名称作为备用
          if (teamName) {
            this.teamData.name = decodeURIComponent(teamName)
            console.log('使用传入的球队名称:', this.teamData.name)
          }
          
          uni.showToast({
            title: '球队数据获取失败',
            icon: 'error'
          })
        }
        
      } catch (error) {
        console.log('=== API请求失败 ===')
        console.error('请求错误:', error)
        console.error('错误详情:', {
          message: error.message,
          code: error.code,
          name: error.name
        })
        
        // 使用传入的球队名称作为备用
        if (teamName) {
          this.teamData.name = decodeURIComponent(teamName)
          console.log('API失败，使用传入的球队名称:', this.teamData.name)
        }
        
        uni.showToast({
          title: '网络请求失败',
          icon: 'error'
        })
        
      } finally {
        uni.hideLoading()
        console.log('=== 球队数据加载流程结束 ===')
      }


    },
    
    // 本地API调用方法（备用）
    async callTeamDetailAPI(params) {
      console.log('=== 使用本地API调用方法 ===')
      console.log('请求参数:', params)
      try {
        const response = await request.get('cunba/team/detail', params, {
          noAuth: true,
          noVerify: true
        })
        console.log('本地API调用成功:', response)
        return response
      } catch (error) {
        console.error('本地API调用失败:', error)
        throw error
      }
    },
    
    // 显示更多菜单
    showMenu() {
      uni.showActionSheet({
        itemList: ['分享球队', '关注球队', '举报'],
        success: (res) => {
          console.log('选中了第' + (res.tapIndex + 1) + '个按钮')
          switch(res.tapIndex) {
            case 0:
              this.shareTeam()
              break
            case 1:
              this.followTeam()
              break
            case 2:
              this.reportTeam()
              break
          }
        }
      })
    },

    // 分享球队
    shareTeam() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    },

    // 关注球队
    followTeam() {
      uni.showToast({
        title: '已关注该球队',
        icon: 'success'
      })
    },

    // 切换关注状态
    toggleFollow() {
      this.isFollowed = !this.isFollowed
      uni.showToast({
        title: this.isFollowed ? '已关注该球队' : '已取消关注',
        icon: 'success'
      })
    },

    // 举报球队
    reportTeam() {
      uni.showModal({
        title: '举报',
        content: '请选择举报原因',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '举报已提交',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 查看球员详情
    viewPlayerDetail(player) {
      console.log('查看球员详情:', player)
      uni.navigateTo({
        url: `/pages/cunba/player_detail/index?playerId=${player.id}&playerName=${encodeURIComponent(player.name)}`
      })
    },
    
    // 观看回放
    watchReplay(match) {
      console.log('观看回放:', match)
      uni.showToast({
        title: '回放功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 球队统计数据样式 */
.team-stats {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    .stat-value {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

/* 球队头部信息 */
.team-header {
  position: relative;
  height: 200px;
  overflow: hidden;
  
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #8B1538 0%, #C41E3A 50%, #8B1538 100%);
    
    .bg-pattern {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
      background-size: 200px 200px, 150px 150px, 100px 100px;
    }
  }
  
  .header-content {
    position: relative;
    height: 100%;
    padding: 0 20px;
    padding-top: env(safe-area-inset-top);
    display: flex;
    flex-direction: column;
    
    .top-bar {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;
      margin-top: 10px;
      
      .back-btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        position: relative;
        transform: translateY(40px);
        
        .back-icon {
          color: #fff;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    
    .team-info {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      margin-bottom: 20px;
      margin-top: 40px;
      padding-right: 20px;
      
      .team-logo-container {
        margin-right: 18px;
        
        .team-logo {
          width: 70px;
          height: 70px;
          border-radius: 14px;
          background: rgba(255, 255, 255, 0.15);
          border: 2px solid rgba(255, 255, 255, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }
      }
      
      .team-details {
        flex: 1;
        
        .team-name-cn {
          display: block;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 4px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          line-height: 1.2;
        }
        
        .team-venue {
          display: block;
          color: rgba(255, 255, 255, 0.85);
          font-size: 13px;
          line-height: 1.3;
          font-weight: 400;
        }
      }
      
      .follow-btn-container {
        display: flex;
        align-items: center;
        
        .follow-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px 20px;
          border-radius: 22px;
          background: rgba(255, 255, 255, 0.25);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.6);
          box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease;
          min-width: 90px;
          position: relative;
          transform: translateX(20px);
          &:active {
            transform: translateX(20px) scale(0.95);
            background: rgba(255, 255, 255, 0.3);
          }
          
          // 已关注状态样式
          &.followed {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.4);
            
            .follow-icon, .follow-text {
              color: rgba(255, 255, 255, 0.9);
            }
          }
          
          .follow-icon {
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            margin-right: 10px;
            transition: color 0.3s ease;
          }
          
          .follow-text {
            font-size: 13px;
            color: #fff;
            font-weight: 600;
            transition: color 0.3s ease;
          }
        }
      }
    }
  }
}

/* 标签栏 */
.tab-bar {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .tab-scroll {
    white-space: nowrap;
    
    .tab-list {
      display: flex;
      justify-content: center;
      
      .tab-item {
        flex-shrink: 0;
        padding: 15px 40px;
        position: relative;
        
        .tab-text {
          color: #666;
          font-size: 16px;
          font-weight: 500;
        }
        
        &.active {
          .tab-text {
            color: #C41E3A;
            font-weight: bold;
          }
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: #C41E3A;
            border-radius: 2px;
          }
        }
      }
    }
  }
}

/* 内容区域 */
.content-area {
  flex: 1;
  background: #fff;
}

/* 阵容内容 */
.roster-content {
  .roster-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .roster-stats {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .roster-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      
      .roster-count {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

/* 球员列表 */
.player-list {
  .list-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
    
    .col-avatar { width: 50px; }
    .col-name { flex: 1; text-align: left; padding-left: 10px; }
    .col-number { width: 60px; text-align: center; }
    .col-position { width: 80px; text-align: center; }
    .col-age { width: 60px; text-align: center; }
    
    text {
      font-size: 14px;
      color: #666;
      font-weight: bold;
    }
  }
  
  .player-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
    
    &:active {
      background-color: #f8f9fa;
    }
    
    .col-avatar {
      width: 50px;
      display: flex;
      justify-content: center;
      
      .player-avatar {
        width: 36px;
        height: 36px;
        border-radius: 18px;
        background: #f0f0f0;
      }
    }
    
    .col-name {
      flex: 1;
      text-align: left;
      padding-left: 10px;
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
    
    .col-number {
      width: 60px;
      text-align: center;
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
    
    .col-position {
      width: 80px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    
    .col-age {
      width: 60px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
}

/* 占位内容 */
.placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  
  .placeholder-text {
    color: #999;
    font-size: 16px;
  }
}

/* 比赛内容样式 */
.schedule-content {
  .match-section {
    margin-bottom: 30px;
    
    .section-header {
      padding: 20px;
      background: #f8f9fa;
      border-bottom: 1px solid #f0f0f0;
      
      .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .match-list {
      .match-item {
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        
        .match-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          
          .match-time {
            font-size: 14px;
            color: #666;
          }
          
          .match-venue {
            font-size: 14px;
            color: #999;
          }
        }
        
        .match-teams {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 15px;
          
          .team {
            flex: 1;
            text-align: center;
            
            .team-name {
              font-size: 16px;
              color: #333;
              font-weight: 500;
            }
          }
          
          .match-score, .match-vs {
            flex: 0 0 120px;
            text-align: center;
            
            .score {
              font-size: 18px;
              color: #333;
              font-weight: bold;
              margin-bottom: 5px;
              display: block;
            }
            
            .vs-text {
              font-size: 16px;
              color: #999;
              font-weight: bold;
            }
            
            .match-result {
              font-size: 14px;
              font-weight: bold;
              
              &.result-win {
                color: #52c41a;
              }
              
              &.result-lose {
                color: #f5222d;
              }
              
              &.result-draw {
                color: #faad14;
              }
              
              &.result-default {
                color: #666;
              }
            }
          }
        }
        
        .match-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .match-status {
            font-size: 14px;
            color: #666;
            
            &.upcoming {
              color: #1890ff;
            }
          }
          
          .action-btn {
            padding: 6px 16px;
            border-radius: 15px;
            border: 1px solid #d9d9d9;
            
            .btn-text {
              font-size: 12px;
              color: #666;
            }
            
            &:active {
              background: #f5f5f5;
            }
          }
        }
      }
    }
  }
  
  .empty-matches {
    padding: 60px 20px;
    text-align: center;
    
    .empty-text {
      font-size: 16px;
      color: #999;
    }
  }
}
</style>
